<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            前端百宝箱
        </title>
        <style type="text/css">
            body { padding-top: 60px; padding-bottom: 10px; }
        </style>
        <link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
		<script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
		<script>
			function makeTable(table,data){
				var buf=[];
				for(var i=0;i<data.length;i++){
					var item=data[i];
					buf.push('<tr>');
					buf.push('<td>'+item.name+'</td>');
					buf.push('<td><a href="'+item.url+'" target="_blank">'+item.url+'</a></td>');
					buf.push('</tr>');
				}
				table.find("tbody").append(buf.join(''));
			}
		</script>
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
            </script>
        <![endif]-->
    </head>
    
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </a>
                    <a class="brand" href="#">
                        前端百宝箱
                    </a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="html.html">HTML</a></li>
                            <li><a href="css.html">CSS</a></li>
                            <li><a href="javascript.html">JavaScript</a></li>
                            <li><a href="tools.html">工具</a>
							<li class="active"><a href="resources.html">资源</a></li>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="container">
			<div class="alert alert-info">
				<i class="icon-star"></i>&nbsp;&nbsp;收集的各种网络资源。
			</div>
			<ul id="tab" class="nav nav-tabs">
			  <li class="active"><a href="#front" data-toggle="tab">HTML & CSS</a></li>
			  <li><a href="#javascript" data-toggle="tab">JavaScript</a></li>
			  <li><a href="#jquery" data-toggle="tab">jQuery 插件</a></li>
			  <li><a href="#future" data-toggle="tab">HTML5 & CSS3</a></li>
			  <li><a href="#blog" data-toggle="tab">前端博客</a></li>
			  <li><a href="#site" data-toggle="tab">前端网站</a></li>
			  <li><a href="#image" data-toggle="tab">图片工具</a></li>
			   <li><a href="#ppt" data-toggle="tab">Web PPT</a></li>
			  <li><a href="#other" data-toggle="tab">其它资源</a></li>
			</ul>
 
			<div class="tab-content">
			  <div class="tab-pane fade in active" id="front">
					<table class="table table-striped table-bordered" id="front-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'浏览器 Hack 查询',url:'http://browserhacks.com'},
							{name:'Google HTML/CSS 编码规范',url:'http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml'},
							{name:'IE CSS Bug 列表',url:'http://haslayout.net/css/'},
							{name:'Twitter Bootstrap',url:'http://twitter.github.com/bootstrap/'},
							{name:'CSS属性排序',url:'http://csscomb.com/'},
							{name:'CSS在线手册',url:'http://css.doyoe.com/'},
							{name:'CSS在线美化',url:'http://html.fwpolice.com/css/'}
						];
						makeTable($("#front-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab begin -->
			  <div class="tab-pane fade" id="javascript">
					<table class="table table-striped table-bordered" id="javascript-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'Google JavaScript 编码规范',url:'http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml'},
							{name:'JavaScript 秘密花园',url:'http://bonsaiden.github.com/JavaScript-Garden/zh/'},
							{name:'JSON转换：JSON2',url:'http://www.json.org/js.html'},
							{name:'Twitter Bootstrap',url:'http://twitter.github.com/bootstrap/'},
							{name:'Bootstrap 中文网',url:'http://www.bootcss.com/'},
							{name:'Underscore',url:'http://underscorejs.org/'},
							{name:'Backbone',url:'http://backbonejs.org/'},
							{name:'$script.js',url:'https://github.com/ded/script.js'},
							{name:'JavaScript Patterns',url:'http://shichuan.github.com/javascript-patterns/'},
							{name:'Raphael 矢量图形库',url:'http://raphaeljs.com/'},
							{name:'gRaphael 矢量图表库',url:'http://g.raphaeljs.com/'},
							{name:'zeptojs',url:'http://zeptojs.com/'},
							{name:'CDNjs',url:'http://cdnjs.com/'},
							{name:'My97日期插件',url:'http://www.my97.net/dp/index.asp'},
							{name:'JavaScript命令行构建工具',url:'http://gruntjs.com/'},
							{name:'跨浏览器本地存储',url:'https://github.com/marcuswestin/store.js'},
							{name:'书写通俗易懂 JavaScript 的原则',url:'https://github.com/rwldrn/idiomatic.js/tree/master/translations/zh_CN'},
							{name:'ES5 兼容性一览',url:'http://kangax.github.io/es5-compat-table/'},
							{name:'ES6 兼容性一览',url:'http://kangax.github.io/es5-compat-table/es6/'},
							{name:'TodoMVC', url:'http://todomvc.com/'},
							{name:'JS PDF',url:'http://parall.ax/products/jspdf'},
							{name: 'HeadJS 脚本加载', url:'http://headjs.com/'},
							{name: 'mousetrap 快捷键',url:'http://craig.is/killing/mice'},
							{name: 'JS 在线协作',url: 'https://togetherjs.com/'},
							{name: 'Node 模块大全',url:'https://github.com/joyent/node/wiki/modules#wiki-web-frameworks-static'}
						];
						makeTable($("#javascript-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->
			  <!-- tab begin -->
			  <div class="tab-pane fade" id="jquery">
					<table class="table table-striped table-bordered" id="jquery-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'jQuery 插件仓库',url:'http://www.unheap.com/'},
							{name:'jquip',url:'https://github.com/mythz/jquip'},
							{name:'jQuery UI',url:'http://jqueryui.com/'},
							{name:'jQuery Tools',url:'http://jquerytools.org/'},
							{name:'基于jQuery UI的日期时间选择插件',url:'http://trentrichardson.com/examples/timepicker/'},
							{name:'基于jQuery Tools的弹窗插件',url:'https://github.com/dreamsky/freshbox'},
							{name:'Flux Slider 2D/3D 幻灯片效果',url:'http://www.joelambert.co.uk/flux/'},
							{name:'幻灯片插件：Nivo Slider',url:'http://nivo.dev7studios.com/'},
							{name:'幻灯片插件：slidesjs',url:'http://slidesjs.com/'},
							{name:'jQuery星级评分插件',url:'https://github.com/wbotelhos/raty'},
							{name:'jQuery Tooltip Plugin',url:'http://code.drewwilson.com/entry/tiptip-jquery-plugin'},
							{name:'jQuery Form Plugin',url:'http://jquery.malsup.com/form/'},
							{name:'Form Validator Plugin',url:'https://github.com/dreamsky/formvalidator'},
							{name:'jQuery Cookie Plugin',url:'https://github.com/carhartl/jquery-cookie'},
							{name:'jQuery JSON Plugin',url:'http://code.google.com/p/jquery-json/downloads/list'},
							{name:'jQuery Easing Plugin',url:'http://gsgd.co.uk/sandbox/jquery/easing/'},
							{name:'jQuery Lazyload Plugin',url:'http://www.appelsiini.net/projects/lazyload'},
							{name:'jQuery瀑布流布局',url:'http://masonry.desandro.com/index.html'},
							{name:'jQuery source viewer',url:'http://james.padolsey.com/jquery/'},
							{name:'jQuery Tab选项卡插件',url:'http://os.alfajango.com/easytabs/'},
							{name:'jQuery 重力感应插件',url:'http://tinybigideas.com/plugins/jquery-gravity/'},
							{name:'jQuery 树形插件',url:'http://www.ztree.me/v3/main.php'},
							{name:'jQuery Autocomplete',url:'http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/'},
							{name:'jQuery 日历插件',url:'http://arshaw.com/fullcalendar/'}
						];
						makeTable($("#jquery-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab begin -->
			  <!-- tab end -->
			  <div class="tab-pane fade" id="future">
					<table class="table table-striped table-bordered" id="future-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'HTML5/CSS3兼容性',url:'http://www.caniuse.com/'},
							{name:'HTML5/CSS3兼容性',url:'http://fmbip.com/litmus'},
							{name:'HTML5 Test',url:'http://html5test.com/'},
							{name:'HTML5 Demos',url:'http://html5demos.com/'},
							{name:'HTML5 实验室',url:'http://hakim.se/experiments'},
							{name:'HTML5/CSS3实验室',url:'http://cssdeck.com/'},
							{name:'HTML5/CSS3演示教程',url:'http://thecodeplayer.com/'},
							{name:'HTML5shive',url:'https://github.com/aFarkas/html5shiv'},
							{name:'CSS3 Please',url:'http://css3please.com/'},
							{name:'CSS3 Generator',url:'http://css3generator.com/'},
							{name:'CSS3 Maker',url:'http://www.css3maker.com/'},
							{name:'CSS3 UI 库',url:'http://css3lib.alloyteam.com/'},
							{name:'CSS3 动画库',url:'http://ecd.tencent.com/css3/'},
							{name:'CSS3 动画工具',url:'http://ecd.tencent.com/css3/tools.html'},
							{name:'CSS3 动画库',url:'http://daneden.me/animate/'},
							{name:'CSS3 页面过渡特效大全',url:'http://tympanus.net/Development/PageTransitions/'},
							{name:'Webkit CSS 大全',url:'http://ued.ctrip.com/blog/wp-content/webkitcss/index.html'},
							{name:'Media Query 兼容库 Respond',url:'https://github.com/scottjehl/Respond'},
							{name:'响应式图片支持 Picturefill',url:'https://github.com/scottjehl/picturefill'},
							{name: 'CSS3 效果大全',url:'http://h5bp.github.io/Effeckt.css/dist/'},
							{name: 'HTML5 效果大全',url:'http://www.mrdoob.com/'}

						];
						makeTable($("#future-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->
			  <!-- tab begin -->
			  <div class="tab-pane fade" id="blog">
					<table class="table table-striped table-bordered" id="blog-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'前端知识体系',url:'http://fe.adbeginner.com/'},
							{name:'Roberts talk',url:'http://robertnyman.com/'},
							{name:'NCZOnline',url:'http://www.nczonline.net/'},
							{name:'perfection kills',url:'http://perfectionkills.com/'},
							{name:'Paul Irish',url:'http://paulirish.com/'},
							{name:'John Resig',url:'http://ejohn.org/category/blog/'},
							{name:'淘宝UED',url:'http://ued.taobao.com/blog/'},
							{name:'阿里巴巴中文UED',url:'http://www.aliued.cn/'},
							{name:'阿里巴巴国际UED',url:'http://www.aliued.com/'},
							{name:'阿里妈妈UED',url:'http://ued.alimama.com/'},
							{name:'支付宝UED',url:'http://ued.alipay.com/'},
							{name:'一淘UED',url:'http://ux.etao.com/'},
							{name:'腾讯ISUX',url:'http://isux.tencent.com/blog'},
							{name:'腾讯CDC',url:'http://cdc.tencent.com/'},
							{name:'百度MUX',url:'http://www.baiduux.com/'},
							{name:'网易UEDC',url:'http://uedc.163.com/'},
							{name:'新浪UED',url:'http://ued.sina.com/'},
							{name:'人人FED',url:'http://fed.renren.com/'},
							{name:'携程UED',url:'http://ued.ctrip.com/blog/'},
							{name:'腾讯WSD',url:'http://wsd.tencent.com/'},
							{name:'Tencent AlloyTeam',url:'http://www.alloyteam.com/'},
							{name:'支付宝PED',url:'http://ped.alipay.com/'},
							{name:'aimingoo',url:'http://blog.csdn.net/aimingoo'},
							{name:'Yuguo Blog',url:'http://yuguo.us/weblog/'},
							{name:'Vivien Blog',url:'http://vivienchen.me/'},
							{name:'GraceCode',url:'http://www.gracecode.com/'},
							{name:'大前端',url:'http://www.daqianduan.com/'},
							{name:'幸福收藏夹',url:'http://sofish.de/'},
							{name:'前端观察',url:'http://www.qianduan.net/'},
							{name:'我爱互联网',url:'http://www.woiweb.net/'},
							{name:'Web前端开发',url:'http://www.css88.com/'},
							{name:'走走停停看看',url:'http://shawphy.com/'},
							{name:'为之漫笔',url:'http://www.cn-cuckoo.com/'}
						];
						makeTable($("#blog-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->
				<!-- tab begin -->
			  <div class="tab-pane fade" id="site">
					<table class="table table-striped table-bordered" id="site-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'w3cfuns',url:'http://www.w3cfuns.com/'},
							{name:'伯乐在线',url:'http://blog.jobbole.com/'},
							{name:'前端网址导航',url:'http://www.ux265.net/'},
							{name:'编程参考手册',url:'http://overapi.com/'},
							{name:'D2前端技术论坛',url:'http://www.d2forum.org/'},
							{name:'阿里技术嘉年华',url:'http://adc.taobao.com/carnival/'},
							{name:'阿里技术沙龙',url:'http://adc.taobao.com/carnival/salon'},
							{name:'腾讯大讲堂',url:'http://djt.qq.com/'}
						];
						makeTable($("#site-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->
				<!-- tab begin -->
				<div class="tab-pane fade" id="image">
					<table class="table table-striped table-bordered" id="image-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'占位图片',url:'http://placehold.it/'},
							{name:'PlaceImg',url:'http://placeimg.com/'},
							{name:'图片搜索引擎',url:'http://findicons.com/'},
							{name:'图片搜索引擎',url:'http://www.iconfinder.com/'},
							{name:'图片搜索-vector',url:'http://vector.us/'},
							{name:'图片搜索-freepik',url:'http://www.freepik.com/'},
							{name:'PSD资源-365PSD',url:'http://365psd.com/'},
							{name:'PSD资源-FreePSD',url:'http://freepsdfiles.net/'},
							{name:'背景纹理资源',url:'http://subtlepatterns.com/'},
							{name:'背景纹理制作',url:'http://www.bgpatterns.com/'},
							{name:'纹理生成工具',url:'http://www.patterncooler.com/editor/'},
							{name:'PNG压缩-tinypng',url:'http://tinypng.org/'},
							{name:'PNG压缩-compresspng',url:'http://compresspng.com/'},
							{name:'图标字体 IcoMoon',url:'http://icomoon.io/'},
							{name:'设计素材',url:'http://hao.uisdc.com/'}
						];
						makeTable($("#image-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->
				<!-- tab begin -->
				<div class="tab-pane fade" id="ppt">
					<table class="table table-striped table-bordered" id="ppt-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'The Web Can Do That!?',url:'http://www.htmlfivecan.com/'},
							{name:'HTML5 Showcase for Developers',url:'http://www.htmlfivewow.com/'},
							{name:'HTML5 Featrues Overview',url:'http://slides.html5rocks.com/'},
							{name:'Nodejs,脱离浏览器的 JavaScript',url:'http://fengmk2.github.com/ppt/qcon2011/'},
							{name:'JavaScript 基础',url:'http://kejun.github.io/bootcamp_htmlcss/js/'},
							{name:'学习 HTML/CSS',url:'http://kejun.github.io/bootcamp_htmlcss/'}
						];
						makeTable($("#ppt-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->				  
			  <!-- tab begin -->
			  <div class="tab-pane fade" id="other">
					<table class="table table-striped table-bordered" id="other-table">
					<thead>
					  <tr>
						<th>功能</th>
						<th>网址</th>
					  </tr>
					</thead>
					<tbody>
				  <script>
					(function(){
						var data=[
							{name:'jsFiddle',url:'http://jsfiddle.net/'},
							{name:'jsbin',url:'http://jsbin.com'},
							{name:'js 性能测试工具',url:'http://jsperf.com/'},
							{name:'CSS SpriteMe',url:'http://spriteme.org/'},
							{name:'Sprite Cow',url:'http://www.spritecow.com/'},
							{name:'Sprite Pad',url:'http://spritepad.wearekiss.com/'},
							{name:'CSS 图片拼合生成器',url:'http://cn.spritegen.website-performance.org/'},
							{name:'CSS 菜单生成工具',url:'http://cssmenumaker.com/'},
							{name:'二维码生成工具',url:'http://www.the-qrcode-generator.com/'},
							{name:'JSON编写辅助工具',url:'http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html'},
							{name:'皮皮书屋',url:'http://www.ppurl.com/'},
							{name:'阿里技术嘉年华PDF',url:'http://vdisk.weibo.com/u/1939498534'},
							{name:'百度编辑器',url:'http://ueditor.baidu.com/website/index.html'},
							{name:'开源中国在线工具',url:'http://www.ostools.net/'},
							{name:'响应式设计工具',url:'http://mattkersley.com/responsive/'},
							{name:'Chrome Responsive Tools',url:'https://chrome.google.com/webstore/search/responsive?t=http://webstore.google.com'},
							{name:'JSON 随机数据生成',url:'http://www.json-generator.com/'},
							{name:'Deguggex 正则测试工具',url:'http://www.debuggex.com/'},
							{name:'Chrome 翻墙',url:'https://zenmate.io/home'},
							{name:'HTML5 流程图制作',url:'http://www.processon.com/'},
							{name:'静态资源 CDN',url:'http://www.staticfile.org/'},
							{name:'Reveal PPT 工具',url: 'http://lab.hakim.se/reveal-js/'},
							{name:'Sublime Text 插件',url:'https://sublime.wbond.net/'},
							{name:'前端技能汇总',url:'https://github.com/JacksonTian/fks'}
						];
						makeTable($("#other-table"),data);
					})();
				  </script>
					</tbody>
				  </table>
			  </div>
			  <!-- tab end -->
			</div>

			<hr>
            <footer>
                <p>
                    Hongbo Li &copy; 2012 Powered by
                    <a href="docs/bootstrap/index.html" target="_blank">
                        Bootstrap
                    </a>
                </p>
            </footer>
        </div>
    </body>
</html>